<template>
  <div class="section-wrap chanBeitung" id="b">
    <!-- 头部 -->
    <div class="headerBox">
      <div class="header">
        <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>下发整改通知单
      </div>
    </div>
    <div class="form-section" style="margin-top: 40px;" >
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被考核单位</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.departName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书编号</label>
        </div>
        <input type="text"
               placeholder="系统自动生成"
               disabled>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>业主项目部</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.ownerDepartName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>监理项目部</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.superDepartName"
                 disabled>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>施工项目部</label>
        </div>
        <div>
          <input type="text"
                 v-model="detailinfo.constDepartName"
                 disabled>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查时间</label>
        </div>
        <div v-if="detailinfo.checkDate">
          <p>{{detailinfo.checkDate.substring(0,10)}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查地点</label>
        </div>
        <div @click="checkContentaddress()">
          <input type="text"
                 v-model="detailinfo.checkAdress"
                 placeholder="请输入"
                 disabled>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
        <!-- <div @click="classValue4=true">
          <input type="text"
                 v-model="detailinfo.checkAdress"
                 placeholder="请选择"
                 disabled>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div> -->
       <!-- <group>
          <popup-picker :data="accopt1"
                        v-model="dress"
                        placeholder='请选择'></popup-picker>
        </group>-->
        <!--<group>
          <popup-picker :data="accopt"
                        placeholder='请输入'
                        v-model="detailinfo.checkAdress"
          ></popup-picker>
        </group>-->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改责任人</label>
        </div>
        <div @click="queryUser(0)">
          <input type="text"
                 v-model="detailinfo.rectificationZrrName"
                 placeholder="请选择"
                 disabled>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
        <!--<group>
          <popup-picker :data="accopt"
                        placeholder='请选择'
                        v-model="detailinfo.rectificationZrrName"
          ></popup-picker>
        </group>-->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>抄送接收人</label>
        </div>
        <div class="input_div" @click="classValue3=true">
          <input type="text"
                 v-model="detailinfo.receiveName"
                 placeholder="请选择"
                 disabled
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
        <!--<div @click="queryUser(1)">
          <input type="text"
                 v-model="detailinfo.receiveName"
                 placeholder="请选择"
                 disabled>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>-->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查范围和内容</label>
        </div>
        <div @click="checkContent(1)">
          <input type="text"
                 v-model="detailinfo.checkContent"
                 placeholder="请输入"
                 disabled>
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <!--<div class="form-item form-item-style2">
        <div class="label-title">
          <label>检查范围和内容</label>
        </div>
        <div>
                    <textarea placeholder="请输入回复（自行换行)"
                              v-model="detailinfo.checkContent"
                    ></textarea>
        </div>
      </div>-->
    </div>
    <ul class="details_list">
      <li>
        <div>
          <h3>
            <span>问题项{{totalCountQ}}</span>
            <x-icon type="ios-arrow-up"
                    size="22"
                    class="icon-up"></x-icon>
          </h3>
        </div>
        <div style="height: auto">
          <div style="background: white" id="questionDiv">
            <!-- <el-tree
              :data="question"
              node-key="id"
              :default-checked-keys='checkedList'
              ref="tree"
              :props="def"
            >
              <div class="custom-tree-node" slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 100%" >
                <span @click="nodeClick(data)">{{node.label}}</span>
              </div>
            </el-tree> -->
            <el-tree
            :data="question"
            node-key="id"
            :render-content="renderContent1"
            :expand-on-click-node="true"
            ref="tree3"
            :props="def"
          >
          </el-tree>
          </div>
        </div>
      </li>
    </ul>
    <div class="addPlan_select" v-if="flag">
      <ul class="planSel_list">
        <li>
          <div class="form-item form-item-style1">
            <div>
              <label style="font-size: 14px">整改要求</label>
            </div>
            <div>
                    <textarea placeholder="请输入回复（自行换行)"
                              v-model="obj.rectificationCs"
                    ></textarea>
            </div>
          </div>
        </li>
        <li>
          <div class="form-item form-item-style1">
            <div>
              <label  style="font-size: 14px">整改时间</label>
            </div>
            <group>
              <datetime  v-model="obj.rectificationDate.substring(0,10)"></datetime>
            </group>
          </div>
        </li>
        <li>
          <div class="btns" style="padding: 0;">
            <!-- <button>保存</button> -->
            <button  @click="addQuerst"
                     class="green">确认
            </button>
          </div>
        </li>
      </ul>

    </div>
    <div class="btns">
      <!-- <button>保存</button> -->
      <button @click="handleSubmit"
              class="green width200">确认
      </button>
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <select-depart v-if="$store.state.departId" :deptId="$store.state.departId" @nodeClick='selectedDepart' @selectUser='selectUser'></select-depart>
      </popup>
      <popup v-model="classValue2" width="100%" height="300px">
        <group>
          <x-textarea style="height:215px;" :max="200" :rows="6" name="description" placeholder="请输入" v-model="checkArea" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="ent">确定</span> <em @click="clear">清空</em></p>
      </popup>
      <popup v-model="classValueQaddress" width="100%" height="300px">
        <group>
          <x-textarea style="height:215px;" :max="200" :rows="6" name="description" placeholder="请输入" v-model="checkAreadata" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="entaddress">确定</span> <em @click="clear">清空</em></p>
      </popup>
      <popup v-model="classValueQ" width="100%" height="300px">
        <group>
          <x-textarea :max="200" :rows="7" name="description" placeholder="请输入" v-model="questionInfo.rectificationCs" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="ent4">确定</span> <em @click="clear4">清空</em></p>
      </popup>
      <popup v-model="classValue4" width="100%" height="300px">
        <ul class="popList">
          <el-checkbox-group v-model="dress" >
            <el-checkbox v-for="(item,index) in accopt" :key="index"  :label="item.codeName">{{item.codeName}}</el-checkbox>
          </el-checkbox-group>
          <div class="btns_div">
            <a class="submitBtn" @click="classValue4=false">取消</a>
            <a class="cancelBtn" @click="addAdress">确认</a>
          </div>
        </ul>
      </popup>
      <popup v-model="classValue3" width="100%" height="60%" style="padding-bottom:40px;">
        <div style="background: white;height:100%;overflow-y:scroll;padding-bottom:20px;">
          <el-tree
            v-if="classValue3"
            :data="data"
            node-key="id"
            :render-content="renderContent"
            :expand-on-click-node="true"
            ref="tree1"
            :props="defs"
            style="overflow-y:scroll;"
          ></el-tree>
          <div style="text-align:  center;margin-top: 10px;padding-bottom: 5px;position: absolute;width: 100%;bottom: 0;background-color: #eee;z-index: 10;">
            <el-button size="mini" @click="classValue3=false">取消</el-button>
            <el-button size="mini"  @click="addUser">确认</el-button>
          </div>
        </div>
      </popup>
    </div>
    <div id="aaa" v-if="nodeType" >
      <div class="box" style="z-index:100;position:fixed;">
        <div class="planSel_list" style="height: auto;padding-top:40px;" >
          <x-icon @click="clickNodeType" style="position: absolute;right: 10px;top: 5px;" type="ios-close-outline" size="24"></x-icon>
          <h3 style="text-align:center;line-height:normal;font-size:16px;">请输入整改要求及整改期限</h3>
          <ul class="tree-span">
            <div class="form-item form-item-style1">
              <div class="label-title" style="line-height:normal;">
                <label>整改要求</label>
              </div>
              <div @click="checkContent4()" style="height:100%;">
                <input type="text"
                      v-model="questionInfo.rectificationCs"
                      style="width:50px;"
                      placeholder="请输入"
                      disabled>
                <x-icon style="float:right;margin-top:18px;" type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
              </div>
            </div>
            <div class="form-item form-item-style1">
              <div class="label-title" style="line-height:normal;">
                <label>整改期限</label>
              </div>
              <group>
                    <datetime v-model="questionInfo.rectificationDate"></datetime>
              </group>
            </div>
          </ul>
          <div class="btns_div" style="font-size:12px;">
            <a class="submitBtn" @click="clickClose(0)">取消保存</a>
            <a class="cancelBtn" @click="clickClose(1)">保存</a>
          </div>
        </div>
      </div>

    </div>
    <div v-transfer-dom>
      <popup v-model="keyrequire" width="100%" position="bottom" height="80%" :popup-style="{'z-index':'600'}" should-rerender-on-show>
        <Standard :dataDetail="recordItem" @nodeClick="closeKeyrequire" :canAudit="false"></Standard>
      </popup>
    </div>
  </div>
</template>
<script>
  import upload from '@/commonComponents/upload/index';
  import selectDepart from "@commonComponents/selectUser/selectUser";
  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup
  } from "vux";
  import Popover from "vux/src/components/popover/index";
  import Standard from "@/commonComponents/treeClassify/standard1.vue";

  export default {
    directives: {
      TransferDom
    },
    name: 'brankAbarbeitung',
    data() {
      return {
        keyrequire: false,
        qusertionList:[],
        questionList:[],
        recordItem: {},
        classValue4:false,
        classValueQ:false,
        classValue3:false,
        dress:[],
        nodeType:false,
        data:[],
        itemId:"",
        itemId1:"",
        peosonlist:[],
        userIds:[],
        obj:{id:"",
          questionDescribr:"",
          rectificationCs:"",
          rectificationDate:"",
        },
        defs: {
          children: 'children',
          label: "departName"
        },
        def:{
          children:'children',
          label:"quantizeName"
        },
        classValue2:false,
        checkArea:'',
        classValueQaddress:false,
        checkAreadata:'',
        ids: [],
        entIndex:'',
        entIndexaddress:'',
        addFlag:true,
        flag:false,
        type:null,
        classValue: false,
        array: [],
        arritem:[],
        isDisabled: false,
        accopt: ['单位一', '单位二'],//通知书接收单位
        accoptVal: ['单位一'],
        accopt1: [],
        detailinfo: {
        },
        questionKeyList:[],
        question: [],
        totalCountQ: 0,
        checkedList:[],
        questionTemp: {}, // 记录用户点选的问题项值
        questionInfo: {}, // 保存的整改要求选项
        questionInfoList: []
      }
    },
    components: {
      Popover,
      upload, selectDepart,
      Popup,
      Standard
    },
    created() {
      this.getInfo()
      this.getAdress()
      this.GetQuestionClassity()
      this.examinedUnits()
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      },
      checkContent(num){
        this.classValue2=true
        this.entIndex=num
      },
      checkContent4(num){
        this.classValueQ=true
      },
      checkContentaddress(){
        this.classValueQaddress=true
      },
      //选则地址
      addAdress(){
        this.classValue4=false
        this.detailinfo.checkAdress=this.dress.map(x => x).join(',');
      },
      closeKeyrequire() {
        this.keyrequire = false;
      },
      ent(){
        this.classValue2=false
        if(this.entIndex==1){
          if (this.checkArea){
            this.detailinfo.checkContent=this.checkArea
          } else {
            this.detailinfo.checkArea=''
          }
        } else {
          if (this.checkArea){
            this.detailinfo.checkPoint=this.checkArea
          } else {
            this.detailinfo.checkPoint=''
          }
        }
      },
      entaddress(){
        this.classValueQaddress=false
        this.detailinfo.checkAdress=this.checkAreadata
      },
      ent4() {
        this.classValueQ = false;
      },
      addChecked(id,name) {
        if (this.ids.indexOf(id) >= 0) {
          this.ids.splice(this.ids.indexOf(id), 1)
          this.qusertionList.some((item,i)=>{
            if(item.id == id){
              this.qusertionList.splice(i,1)
              return true;
            }
          })
        } else {
          this.ids.push(id)
          this.obj.id=id;
          this.obj.questionDescribr=name;
          this.flag=true;
        }
      },
      handleCheck(value) {
        if(value!=null&&value!='undefined'){
          if (this.ids.indexOf(value) >= 0) {
            this.ids.splice(this.ids.indexOf(value), 1)
          } else {
            this.ids.push(value)
          }
        }
      },
      getInfo() {
        let id = this.$route.query.recordId;
        this.$axiosAjax.qusetionInfo({parentId: id,rectificationId: ''}).then((res) => {
          if (res.data.success == true) {
            this.detailinfo = res.data.result
          }
        }).catch(
          (err) => {

          }
        )

      },
      getAdress() {
        this.$axiosAjax.getAdress({}).then((res) => {
          if (res.data.success == true) {
            this.accopt=res.data.result
           /* let arr=[]
            res.data.result.forEach(function(v){arr.push(v.codeName);});
            this.accopt1 .push(arr)*/
          }
        }).catch(
          (err) => {

          }
        )

      },
      nodeClick(data) {
        let id = this.$route.query.recordId;
        this.$axiosAjax.H5GetQusetionItems({recordId: id,classifyId:data.id,infoId: this.$route.query.id,isaddoredit:'1'}).then((res) => {
          if (res.data.success == true) {
            this.questionKeyList = res.data.result
            for(let i = 0; i < this.question.length; i++) {
              if (data.classifyId == this.question[i].classifyId) {
              }
            }
            if(res.data.result!=null&&res.data.result.length>0){
              this.nodeType=true
            }
          }
        }).catch(
          (err) => {

          }
        )

      },
      nodeClick2(data) {
        console.log(data);
        if (data.children.length > 0) {
          return false
        }
        if(this.itemId1==data.id){
          return;
        }
        if(data.type=='0'){
          return;
        }
        this.itemId1 = data.id
        let id = this.$route.query.recordId;
        this.$axiosAjax.H5GetQusetionItems({recordId: id,classifyId:data.id,infoId: this.$route.query.id,isaddoredit:'1'}).then((res) => {
          if (res.data.success == true) {
            this.questionKeyList = res.data.result
            this.appendQuestion(data)
          }
        }).catch(
          (err) => {

          }
        )

      },
      clickClose(num) {
        if (num == 1) {
          if (!this.questionInfo.rectificationCs) {
            alert("整改要求不能为空")
            return false
          }
          if (!this.questionInfo.rectificationDate) {
            alert("整改时间不能为空")
            return false
          }
          // 进行保存
          this.questionInfo.rectificationDate = this.questionInfo.rectificationDate + ' 00:00:00'
          this.questionInfo.questionDescribr = this.questionTemp.quantizeName
          if (this.questionList.length == 0) {
            this.questionList.push(this.questionInfo)
          } else {
            let isHasQES = this.questionList.some(item => {
              return item.id == this.questionInfo.id
            })
            if (isHasQES) {
              this.questionList.forEach((item, index) => {
                if (item.id == this.questionInfo.id) {
                  this.questionList.splice(index, 1, this.questionInfo)
                }
              })
            } else {
              this.questionList.push(this.questionInfo)
            }
          }
          this.questionTemp.checked = true
        }
        if(num == 0){
          this.questionTemp.checked = false
          if (this.questionList.length != 0) {
            this.questionList.forEach((item, index) => {
              if (item.id == this.questionInfo.id) {
                this.questionList.splice(index, 1)
              }
            })
          }
        }
        this.questionInfo = {}
        this.questionTemp = {}
        this.nodeType=false
      },
      selectedDepart(data) {
        this.classValue = false;
      },
      clickNodeType() {
        this.nodeType = false
      },
      addQuerst() {
        if(this.obj.rectificationCs==null){
          alert("整改要求不能为空")
          return;
        }
        if(this.obj.rectificationDate==null){
          alert("整改时间不能为空")
          return;
        }
        this.flag=!this.flag
        this.qusertionList.push(this.obj)
        console.log(JSON.stringify(this.qusertionList))
        this.obj={}
      },
      queryUser(num) {
        this.classValue = true;
        this.type=num
      },
      selectUser(data) {
        if(this.type==0){
          this.detailinfo.rectificationZrrName = data.userName
          this.detailinfo.rectificationZrrId = data.id
        }
        this.classValue = false;
      },

      GetQuestionClassity() {
        let id = this.$route.query.recordId;
        let classify = this.$route.query.classifyId
        this.$axiosAjax.GetQuestionClassity({recordId: id,classifyId:classify}).then((res) => {
          if (res.data.success == true) {
            this.question = res.data.result;
            let count = 0
            this.question.forEach(item => {
              count += item.count
            })
            this.totalCountQ = count
          }
        }).catch(
          (err) => {

          }
        )

      },
      handleSubmit() {
        if(this.ids[0]==undefined){
          this.ids.splice(0, 1)
        }
        if(!this.addFlag){
          return false;
        }
        // if (this.dress  == null || this.dress.length<=0) {
        //   this.$vux.toast.text("检查地址不能为空")
        //   return;
        // }
        if (this.questionList == '' ||this.questionList.length <= 0) {
          this.$vux.toast.text("问题项不能为空")
          return;
        }
        if (this.detailinfo.rectificationZrrName == '' || this.detailinfo.rectificationZrrName == null) {
          this.$vux.toast.text("整改人不能为空")
          return;
        }
        // this.detailinfo.checkAdress=this.dress[0]
        this.detailinfo.qusertionIds=this.ids
        this.detailinfo.qusertionList=this.questionList
        this.detailinfo.rocordId=this.$route.query.recordId
        this.detailinfo.recordId=this.$route.query.recordId

        console.log(JSON.stringify(this.detailinfo))
        this.$axiosAjax.AppCreateRectification(this.detailinfo).then((res) => {
          if(res.data.success==true){
            this.$vux.toast.text("下发成功")
            this.$router.go(-1)
            this.addFlag=false
          }else{
            this.addFlag=true
          }
        }).catch(
          (err) => {
            this.$vux.toast.text("下发失败")
            this.addFlag=true
          }
        )

      },
      //单位信息
      examinedUnits() {
        this.$axiosAjax.examinedUnits({parentId: this.$store.state.departId||-1}).then((res) => {
          if (res.data.success == true) {
            this.data = res.data.result
            console.log(this.data)
          }
        }).catch(
          (err) => {

          }
        )
      },
      clear(){
        this.checkArea=''
      },
      clear4(){
        this.questionInfo.rectificationCs = ''
      },
      append (data) {
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        var a =this.peosonlist
        if(a.length>0){
          a.forEach((item,i)=>{
            data.children.unshift({ id: item.id, departName: item.userName,type:"0", children: []})
          })
        }
      },
      appendQuestion (data) {
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        var a =this.questionKeyList
        if(a.length>0){
          a.forEach((item,i)=>{
            data.children.unshift({ id: item.id,recordItem: item, quantizeName: item.keyRequire,type:"0", children: [], checked: false })
          })
        }
      },
      renderContent1 (h, { node, data, store }) {
        if(data.type=='0'){
          return (
          <div class="span" style="width:100%">
            <div class="ll" style="display: flex;justify-content: space-between;padding-right: 30px;">
              <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"  on-click={ () => this.showRisk(data)}>{node.label}</p>
              <el-checkbox  value={data.checked} on-change={ () => this.test1(data) }></el-checkbox>
            </div>
          </div>
        )

        }else{
          return (
            <span class="span">
            <span>
            <span on-click={ () => this.nodeClick2(data) }>{node.label}{data.count}
        </span>
          </span>
          </span>
        )
        }
      },
      renderContent (h, { node, data, store }) {
        if(data.type=='0'){
          return (
            <span class="span">
            <span>
            <span class="ll" on-click={ () => this.nodeClicks(data) }>
        <el-checkbox on-change={ () => this.test(data) }>{node.label}</el-checkbox></span>
          </span>
          </span>
        )

        }else{
          return (
            <span class="span">
            <span>
            <span on-click={ () => this.nodeClicks(data) }>{node.label}
        </span>
          </span>
          </span>
        )
        }
      },
      test(data){
        if(this.userIds.indexOf(data)==-1){
          this.userIds.push(data)
        }else{
          this.userIds.splice(data,1)
        }
      },
      test1 (data) {
        console.log(data)
        this.questionTemp = data
        this.questionInfo.id = this.questionTemp.id
        this.nodeType = true
        return
        if (this.checkedList.length === 0) {
          this.checkedList.push(data)
        } else {
          if(this.checkedList.indexOf(data)==-1){
            this.checkedList.push(data)
          }else{
            this.checkedList = this.checkedList.filter(item => {
              return item.id != data.id
            })
          }
        }
      },
      showBox () {
        this.nodeType = true;
      },
      showRisk (data) {
        console.log(data);
        // this.nodeType = true;
        this.keyrequire = true
        this.recordItem = data.recordItem
        this.recordItem.fileList = []
      },
      addUser(){
        this.classValue3=false
        if(this.userIds.length>0){
          this.detailinfo.receiveId = this.userIds.map(x => x.id).join(',');
          this.detailinfo.receiveName = this.userIds.map(x => x.departName).join(',');
        }
      },
      nodeClicks(item) {
        if(this.itemId==item.id){
          return;
        }
        if(item.type=='0'){
          return;
        }
        this.itemId=item.id
        this.$axiosAjax.getUserList({departId:item.id}).then((res) => {
          if(res.data.success==true){
            if(res.data.result.totalCount>0){
              console.log(res.data.result)
              this.peosonlist = res.data.result.items;
              this.append (item)
            }
          }
        }).catch(
          (err)=>{

          }
        )
      },
    },
    watch:{
      "questionList":function(){
        // this.getAssessmentPlan()
      },
    }
  }
</script>
<style>
  #questionDiv .el-tree-node__content{
    min-height:60px;
    height:auto;
  }
  #questionDiv .el-tree-node__content{
    min-height:60px;
    height:auto;
  }
  /*.transfer_p{
    padding: 10px 20px;
    height: 30px;
  span,em{
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    border-radius: 5px;
    color: #fff;
  }
  span{
    float: left;
    background-color:#2abf72;
  }
  em{
    float: right;
    background-color: #ceaa6c;
  }
  }*/
  .tree-span .el-checkbox__label {
    display: inline-block;
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;}
  .tree-span .el-checkbox+.el-checkbox{
    margin:0!important;
  }
  .tree-span .el-checkbox{

    display: flex;
    align-items: center;
    padding-bottom: 10px!important;
  }
</style>
<style lang="less" scoped>
  .popList {
    min-height: 200px;
    overflow-y: scroll;
    label{
      display: block;
      height: 40px;
      margin: 0;
      text-align: center;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      background-color: #fff;
    }
    .btns_div {
      justify-content: space-around;
      display: flex;
      margin-top: 20px;
      a {
        height: 20px;
        border-radius: 20px;
        display: inline-block;
        width: 70px;
        text-align: center;
        line-height: 20px;
        color: #fff;
      }
      .submitBtn {
        background: #469b7a;
      }
      .cancelBtn {
        background: #ffb400;
      }
    }
  }
  #tt {
    background-color: #eee;
    height: 200px;
    .weui-cell__bd .weui-textarea{
      height: 160px !important;
      background-color: pink;
      .weui-textarea {
        height: 160px !important;
      }
    }
  }
  .transfer_p{
    padding: 10px 20px;
    height: 30px;
    span,em{
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
    }
    span{
      float: left;
      background-color:#2abf72;
    }
    em{
      float: right;
      background-color: #ceaa6c;
    }
  }
  #b{
    position: relative;
    #aaa{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      .box{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.2);
        position: relative;
        .planSel_list{
          position: absolute;
          top:50%;
          left: 50%;
          width: 90%;
          margin: 0 auto;
          height: 200px;
          border-radius: 15px;
          padding: 10px;
          transform: translate(-50%,-50%);
          background-color: #fff;
          .btns_div {
            justify-content: space-around;
            display: flex;
            margin-top: 20px;
            a {
              height: 20px;
              border-radius: 20px;
              display: inline-block;
              width: 70px;
              text-align: center;
              line-height: 20px;
              color: #fff;
            }
            .submitBtn {
              background: #469b7a;
            }
            .cancelBtn {
              background: #ffb400;
            }
          }
        }
      }

    }
  }

  .el-checkbox{
    z-index: 1000;
  }
  .details_list {
    background: #fff;
    margin-bottom: 10px;
    h3 {
      span {
        color: #226afd;
      }
    }
    .cc{
      flex:1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }
    li {
      position: relative;
      > div {
        position: relative;
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
      .checkbox {
        background: url(../../../static/images/checkbox.png) no-repeat left center;
        background-size: 16px 16px;
        padding-left: 28px;
        height: 100%;
        float: left;
        max-width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &.active {
          background: url(../../../static/images/checked.png) no-repeat left center;
          background-size: 16px 16px;
        }
      }
      i {
        position: absolute;
        right: 34px;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        padding: 8px 5px;
        background: #226afd;
        border-radius: 50%;
        font-size: 12px;
        color: #fff;
        line-height: 0;
      }
    }
    > li {
      justify-content: space-between;
      padding-left: 20px;
      // border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
        border-top: 1px solid #ebeef2;
      }
      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
      .list_3 {
        li {
          font-size: 14px;
          // text-indent: 2em;
          padding-left: 20px;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }
  .addPlan_select{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    .planSel_list{
      width: 100%;
      margin: 0 auto;
      padding-top: 150px;
      li{
        height: 57px;
        line-height: 57px;
        padding-left: 10px;
        background: #fff;
        color: #469b7a;
        font-size: 14px;

      }
    }
  }
  .el-icon-caret-right:before {
    content: "\e605" !important;
  }
</style>
